import { Pie, PieChart, ResponsiveContainer, Tooltip, Cell } from 'recharts';
import { STAT_COLORS } from '@/constant';
import type { questionComponentType } from '@/utils/type';


const computeData = (component: questionComponentType, list: any[]) => {
  const names = component.props?.options?.map(item => {
    return {
      name: item.label,
      value: 0
    }
  })
  list?.forEach((item: any) => {
    //根据key找value
    if (item[component.fe_id]) {
      const tmp = item[component.fe_id].split(',')
      tmp?.forEach((item: any) => {
        names?.forEach(i => {
          if (i.name === item) i['value']++
        })
      })
    }
  })

  return names
}


type propsType = {
  component: questionComponentType,
  list:any[]
}

export default function ChartPie(props: propsType) {
  const { component,list } = props

  const Data = computeData(component,list)


  return (
      <ResponsiveContainer width="100%" height="70%">
        <PieChart width={400} height={400}>
          <Pie
            dataKey="value"
            data={Data}
            cx="50%"
            cy="50%"
            outerRadius={70}
            fill="#8884d8"
            label={({ name, value }) => `${name}: ${value}`}
          >
          {Data?.map((item,index)=>(
            <Cell key={item.name} fill={STAT_COLORS[index]} />
          ))}
          </Pie>
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
  )
}
